<template>
	<view class="settings-container">
		<view class="page-top flex">
			<BackButton class="back-button"></BackButton>
			<view class="page-title">设置</view>
			<Avatar class="back-button"></Avatar>
		</view>
		<view class="time-setting">
			<view class="title">设定时间</view>
			<view class="item flex" v-for="(item, i) in reminderTime" :key="i">
				<text>{{reminderTimeTexts[i]}}</text>
				<picker mode="time" :value="item" @change="timeChange(i, $event)">
					<view class="text">{{item}}</view>
				</picker>
			</view>
			<image class="cactus" src="@/static/images/cactus.png" mode="aspectFit"></image>
		</view>

		<view class="reminder-setting">
			<view class="repeat">
				<view class="title">重复</view>
				<view class="days flex">
					<view :class="repeatDays[i] ? 'active' : ''" v-for="(item, i) in repeatDays" :key="i" @tap="repeatChange(i)">
						{{days[i]}}
					</view>
				</view>
			</view>
			<view class="reminder-type flex">
				<text class="title">提醒方式</text>
				<picker mode="selector" :value="reminderModeIndex" @change="reminderModeChange" :range="options">
					<view class="flex">
						<view class="text">{{reminderModeMap[reminderMode]}}</view>
						<image class="arrow" src="@/static/images/icon/arrow-right-2.png" @tap="toPage('/pages/exercise/page1')"
							mode="aspectFit"></image>
					</view>
				</picker>
			</view>
			<view class="slider-box voiceVolume">
				<view class="text">铃声提示大小</view>
				<slider :value="voiceVolume" @change="sliderChange($event, 1)" :activeColor="activeColor"></slider>
			</view>
			<view class="slider-box soundEffectVolume">
				<view class="text">音效大小</view>
				<slider :value="soundEffectVolume" @change="sliderChange($event, 2)" :activeColor="activeColor"></slider>
			</view>
			<view class="slider-box eye-tracking">
				<view class="text">小鸟的运动灵敏度</view>
				<slider :value="eyeTrackingSensitivity" @change="sliderChange($event, 3)" :activeColor="activeColor"></slider>
			</view>
			<button class="confirm-btn" hover-class="active" @tap="confirmHandle">确定</button>
		</view>
	</view>
</template>

<script>
	import BackButton from "@/components/BackButton"
	import Avatar from "@/components/Avatar"
	import {
		alarmReminder
	} from "@/utils/alarmReminder"
	import {
		getSettings,
		setSettings
	} from "@/api/system/user"
	export default {
		components: {
			BackButton,
			Avatar
		},
		onLoad() {
			getSettings().then((res) => {
				this.reminderTime = res.reminder.reminderTime;
				this.repeatDays = res.reminder.repeatDays;
				this.reminderMode = res.reminder.reminderMode;
				this.voiceVolume = res.reminder.voiceVolume;
				this.soundEffectVolume = res.reminder.soundEffectVolume;
				this.eyeTrackingSensitivity = res.eyeTrackingSensitivity;
			})
			alarmReminder()
		},
		data() {
			return {
				reminderTimeTexts: ["上午", "中午", "睡前"],
				days: ["一", "二", "三", "四", "五", "六", "日"],
				options: ["弹窗", "震动", "弹窗+震动", "无"],
				reminderModeMap: {
					alert: "弹窗",
					vibrate: "震动",
					alertAndVibrate: "弹窗+震动",
					none: "无",
				},
				reminderTime: ["08:00", "13:00", "22:00"],
				repeatDays: [1, 1, 1, 1, 1, 0, 0],
				reminderMode: "alert",
				voiceVolume: 50,
				soundEffectVolume: 50,
				eyeTrackingSensitivity: 50,
				reminderMode_default: "alert",
				activeColor: "#02C97D",
			}
		},
		computed: {
			reminderModeIndex() {
				let index = this.options.indexOf(this.reminderModeMap[this.reminderMode])
				if (index === -1) {
					index = 1;
				}
				return index;
			}
		},
		methods: {
			timeChange(index, e) {
				const time = e.detail.value;
				const timeArr = time.split(":");
				timeArr[0] = +timeArr[0];
				timeArr[1] = +timeArr[1];
				this.reminderTime[index] = time;
				this.reminderTime = [...this.reminderTime];
			},
			repeatChange(index) {
				this.repeatDays[index] = this.repeatDays[index] === 1 ? 0 : 1;
				this.repeatDays = [...this.repeatDays];
			},
			reminderModeChange(e) {
				const index = e.detail.value;
				const newText = this.options[index];
				for (const key in this.reminderModeMap) {
					const item = this.reminderModeMap[key];
					if (item === newText) {
						this.reminderMode = key;
						break;
					}
					this.reminderMode = this.reminderMode_default;
				}
			},
			sliderChange(e, type) {
				const newVal = e.detail.value;
				if (type === 1) {
					this.voiceVolume = newVal;
				} else if (type === 2) {
					this.soundEffectVolume = newVal;
				} else if (type === 3) {
					this.eyeTrackingSensitivity = newVal;
				}
			},
			confirmHandle() {
				const data = {
					reminder: {
						reminderTime: this.reminderTime,
						repeatDays: this.repeatDays,
						reminderMode: this.reminderMode,
						voiceVolume: this.voiceVolume,
						soundEffectVolume: this.soundEffectVolume
					},
					eyeTrackingSensitivity: this.eyeTrackingSensitivity
				};
				setSettings(data).then(() => {
					this.$modal.msgSuccess("设置成功");
					plus.device.setVolume(this.soundEffectVolume / 100);
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		padding: 80upx 30upx 30upx 30upx;
	}

	.settings-container {
		font-weight: bold;
		letter-spacing: 0.05em;

		.page-title {
			font-size: 28upx;
		}

		.page-top {
			height: 70upx;
			line-height: 70upx;
			justify-content: space-between;

			.back-button {
				margin-right: 42upx;
			}
		}

		.time-setting {
			position: relative;
			margin: 0 40upx;
			padding-left: 10upx;
			margin-top: 15upx;
			margin-bottom: 45upx;
			border-bottom: 4upx solid #00E98E;

			.title {
				margin-bottom: 25upx;
				font-size: 28upx;
			}

			.item {
				height: 47upx;
				line-height: 47upx;
				margin-left: 55upx;
				margin-bottom: 50upx;
				font-size: 30upx;

				text {
					margin-right: 35upx;
				}

				.text {
					font-size: 38upx;
					border: 2upx solid #000;
					border-radius: 100upx;
					padding: 5upx 12upx;
					letter-spacing: 0.3em;
					text-align: center;
				}
			}

			.cactus {
				width: 130upx;
				height: 130upx;
				opacity: 0.68;
				position: absolute;
				right: 15upx;
				bottom: -2upx;
			}
		}

		.reminder-setting {

			.repeat {
				margin: 0 40upx;
				margin-bottom: 35upx;
				padding-left: 10upx;
				border-bottom: 4upx solid #00E98E;

				.title {
					font-size: 28upx;
					margin-bottom: 45upx;
				}

				.days {
					// justify-content: space-between;
					flex-wrap: wrap;
					gap: 0 55upx;

					view {
						$size: 78upx;
						width: $size;
						height: $size;
						line-height: 75upx;
						color: #6D6A6A;
						font-size: 32upx;
						text-align: center;
						margin-bottom: 33upx;
						border-radius: $size;
						border: 3upx solid #6D6A6A;

						&.active {
							color: #fff;
							background-color: #02C97D;
							border: none;
						}
					}
				}
			}

			.reminder-type {
				margin: 0 50upx;
				margin-bottom: 50upx;
				justify-content: space-between;

				.title {}

				.text {
					color: #8E8C8C;
				}

				.arrow {
					width: 25upx;
					height: 25upx;
					margin-top: 8upx;
					margin-right: -10upx;
					;
				}

			}

			.slider-box {
				margin: 0 20upx;
				margin-bottom: 55upx;

				.text {
					margin: 0 30upx;
					padding-bottom: 5upx;
				}

			}

			.confirm-btn {
				width: 388upx;
				height: 85upx;
				line-height: 85upx;
				color: #fff;
				background-color: #02C97D;
				border-radius: 22upx;
				margin-top: 80upx;

				&.active {
					opacity: 0.8;
				}
			}
		}
	}
</style>